import React, { useEffect, useRef } from 'react';
import { Box, GlobalStyles } from '@mui/material';

/**
 * SequentialBackgroundIcons
 * 
 * A reusable component that displays large icons in the background that
 * sequentially fade in and out as the user scrolls through content.
 * Icons now zoom in/out from the center when appearing/disappearing.
 * 
 * @param {Object} props
 * @param {Array} props.icons - Array of MUI icon components to display
 * @param {number} props.opacity - Opacity value for the icons (0-1, default 0.08)
 * @param {string} props.color - Color for the icons (default: primary color)
 * @param {string} props.maxWidth - Maximum width for icons (default: '500px')
 * @param {string} props.maxHeight - Maximum height to maintain aspect ratio (default: 'auto')
 */
const SequentialBackgroundIcons = ({ 
  icons = [], 
  opacity = 0.08,
  color = '#1976d2',
  maxWidth = '500px',
  maxHeight = '80vh'
}) => {
  const iconsRef = useRef(null);
  
  useEffect(() => {
    if (!icons || icons.length === 0) return;

    // Setup scroll detection instead of using IntersectionObserver
    const handleScroll = () => {
      // Calculate scroll progress based on page scroll position
      const scrollPosition = window.scrollY;
      const documentHeight = document.body.scrollHeight - window.innerHeight;
      const scrollProgress = Math.min(scrollPosition / documentHeight, 1);
      
      // Get all the icon elements
      const iconElements = document.querySelectorAll('.sequential-background-icon');
      
      // Hide all icons first
      iconElements.forEach(icon => {
        icon.style.opacity = '0';
        icon.style.transform = 'scale(0)';
      });
      
      // Determine which icon should be visible based on scroll progress
      const iconIndex = Math.min(
        Math.floor(scrollProgress * icons.length * 1.5) % icons.length,
        icons.length - 1
      );
      
      // Make only the current icon visible with the specified opacity and scale
      if (iconElements[iconIndex]) {
        iconElements[iconIndex].style.opacity = opacity.toString();
        iconElements[iconIndex].style.transform = 'scale(1)';
      }
    };
    
    // Initial call to set the right icon
    handleScroll();
    
    // Add scroll event listener
    window.addEventListener('scroll', handleScroll);
    
    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, [icons, opacity]);

  if (!icons || icons.length === 0) return null;

  return (
    <>
      <GlobalStyles
        styles={`
          .sequential-background-icon {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.8s ease, transform 0.8s ease;
            transform: scale(0);
            transform-origin: center center;
            z-index: 9999;
          }

          .sequential-background-icon svg {
            width: 80vw;
            max-width: ${maxWidth};
            max-height: ${maxHeight};
            height: auto;
            color: ${color};
          }
        `}
      />

      {/* Render all icons in fixed position containers */}
      {icons.map((IconComponent, index) => (
        <Box 
          key={`bg-icon-${index}`} 
          className="sequential-background-icon"
          ref={index === 0 ? iconsRef : null}
        >
          {React.createElement(IconComponent, { fontSize: "inherit" })}
        </Box>
      ))}
    </>
  );
};

export default SequentialBackgroundIcons;